<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../../style.css" type="text/css" media="screen">
<link rel="stylesheet" href="../../../print.css" type="text/css" media="print">
<meta content="ChartScrollbar,com.amcharts.chartClasses.ChartScrollbar,categoryAxis,graphType,mouseWheelStep,graph" name="keywords">
<title>com.amcharts.chartClasses.ChartScrollbar</title>
<script type="text/javascript" src="../../../AC_OETags.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript" src="../../../asdoc.js"></script><script type="text/javascript" language="javascript" src="../../../cookies.js"></script><script type="text/javascript" language="javascript">
<!--
				asdocTitle = 'ChartScrollbar - API Documentation';
				var baseRef = '../../../';
				window.onload = configPage;
			--></script>
<table style="display:none" id="titleTable" cellspacing="0" cellpadding="0" class="titleTable">
<tr>
<td align="left" class="titleTableTitle">amCharts Flex components documentation</td><td align="right" class="titleTableTopNav"><a onclick="loadClassListFrame('../../../all-classes.html')" href="../../../package-summary.html">All&nbsp;Packages</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../../all-classes.html')" href="../../../class-summary.html">All&nbsp;Classes</a>&nbsp;|&nbsp;<a onclick="loadClassListFrame('../../../index-list.html')" href="../../../all-index-A.html">Index</a>&nbsp;|&nbsp;<a href="../../../index.html?com/amcharts/chartClasses/ChartScrollbar.html&amp;com/amcharts/chartClasses/class-list.html" id="framesLink1">Frames</a><a onclick="parent.location=document.location" href="" style="display:none" id="noFramesLink1">No&nbsp;Frames</a></td><td rowspan="3" align="right" class="titleTableLogo"><img alt="Adobe Logo" title="Adobe Logo" class="logoImage" src="../../../images/logo.jpg"></td>
</tr>
<tr class="titleTableRow2">
<td align="left" id="subTitle" class="titleTableSubTitle">Class&nbsp;ChartScrollbar</td><td align="right" id="subNav" class="titleTableSubNav"><a href="#propertySummary">Properties</a>&nbsp;| <a href="#methodSummary">Methods</a>&nbsp;| <a href="#styleSummary">Styles</a>&nbsp;| <a href="#includeExamplesSummary">Examples</a></td>
</tr>
<tr class="titleTableRow3">
<td colspan="2">&nbsp;</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
<!--
if (!isEclipse() || window.name != ECLIPSE_FRAME_NAME) {titleBar_setSubTitle("Class ChartScrollbar"); titleBar_setSubNav(false,true,true,false,false,false,true,true,false,false,false,false,false,false);}
--></script>
<div class="MainContent">
<table cellspacing="0" cellpadding="0" class="classHeaderTable">
<tr>
<td class="classHeaderTableLabel">Package</td><td><a onclick="javascript:loadClassListFrame('class-list.html')" href="package-detail.html">com.amcharts.chartClasses</a></td>
</tr>
<tr>
<td class="classHeaderTableLabel">Class</td><td class="classSignature">public class ChartScrollbar</td>
</tr>
<tr>
<td class="classHeaderTableLabel">Inheritance</td><td class="inheritanceList">ChartScrollbar <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../../images/inherit-arrow.gif"> <a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a> <img class="inheritArrow" alt="Inheritance" title="Inheritance" src="../../../images/inherit-arrow.gif"> mx.core.UIComponent</td>
</tr>
</table>
<p></p>
  ChartScrollbar class displays chart scrollbar.
  To add a scrollbar, add the following mxml to your chart:
  
   <pre>
    &lt;amcharts:chartScrollbar&gt;
      &lt;amcharts:ChartScrollbar/&gt;      
    &lt;/amcharts:chartScrollbar&gt;
   </pre>
  <p></p>
<p>
<a href="#includeExamplesSummary">View the examples.</a>
</p>
<br>
<hr>
</div>
<a name="propertySummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Properties</div>
<div class="showHideLinks">
<div class="hideInheritedProperty" id="hideInheritedProperty">
<a onclick="javascript:setInheritedVisible(false,'Property');" href="#propertySummary" class="showHideLink"><img src="../../../images/expanded.gif" class="showHideLinkImage"> Hide Inherited Public Properties</a>
</div>
<div class="showInheritedProperty" id="showInheritedProperty">
<a onclick="javascript:setInheritedVisible(true,'Property');" href="#propertySummary" class="showHideLink"><img src="../../../images/collapsed.gif" class="showHideLinkImage"> Show Inherited Public Properties</a>
</div>
</div>
<table id="summaryTableProperty" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Property</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#categoryAxis">categoryAxis</a> : <a href="../axes/CategoryAxis.html">CategoryAxis</a>
<div class="summaryTableDescription">[read-only]
   Returns CategoryAxis object of scrollbar
   </div>
</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#graph">graph</a> : <a href="../chartClasses/AmGraph.html">AmGraph</a>
<div class="summaryTableDescription">[write-only]
   Specifies which graph will be displayed in the scrollbar.</div>
</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#graphType">graphType</a> : String<div class="summaryTableDescription">
   Type of a scrollbar's graph.</div>
</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol"><a class="signatureLink" href="#mouseWheelStep">mouseWheelStep</a> : Number<div class="summaryTableDescription">
  By default, if scrolling with mouse wheel is enabled, the scrollbar moves by one minPeriod when mouse wheel is turned.</div>
</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="hideInheritedProperty">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol"><a class="signatureLink" href="SimpleChartScrollbar.html#updateOnReleaseOnly">updateOnReleaseOnly</a> : Boolean<div class="summaryTableDescription">
  Specifies if the chart should be updated while dragging/resizing the scrollbar or  only at the moment when user releases mouse button.</div>
</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
</table>
</div>
<a name="methodSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Public Methods</div>
<table id="summaryTableMethod" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Method</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="#ChartScrollbar()">ChartScrollbar</a>()</div>
<div class="summaryTableDescription">
       Constructor.</div>
</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
</table>
</div>
<a name="styleSummary"></a>
<div class="summarySection">
<div class="summaryTableTitle">Styles</div>
<div class="showHideLinks">
<div class="hideInheritedStyle" id="hideInheritedStyle">
<a onclick="javascript:setInheritedVisible(false,'Style');" href="#styleSummary" class="showHideLink"><img src="../../../images/expanded.gif" class="showHideLinkImage"> Hide Inherited Styles</a>
</div>
<div class="showInheritedStyle" id="showInheritedStyle">
<a onclick="javascript:setInheritedVisible(true,'Style');" href="#styleSummary" class="showHideLink"><img src="../../../images/collapsed.gif" class="showHideLinkImage"> Show Inherited Styles</a>
</div>
</div>
<table id="summaryTableStyle" class="summaryTable " cellpadding="3" cellspacing="0">
<tr>
<th>&nbsp;</th><th colspan="2">Style</th><th>Description</th><th class="summaryTableOwnerCol">Defined&nbsp;by</th>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:autoGridCount"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">autoGridCount</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Boolean &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Specifies whether number of gridCount is specified automatically, acoarding to the axis size. 
  
   The default value is <code>false</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:backgroundAlpha">backgroundAlpha</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Background opacity.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:backgroundColor">backgroundColor</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Background color of the scrollbar.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:color"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">color</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Color of text in the component, including the component label.
    The default value is <code>0x0B333C</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:disabledColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">disabledColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Color of text in the component if it is disabled.
    The default value is <code>0xAAB3B3</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontAntiAliasType"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontAntiAliasType</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Sets the <code>antiAliasType</code> property of internal TextFields. The possible values are 
  <code>"normal"</code> (<code>flash.text.AntiAliasType.NORMAL</code>) 
  and <code>"advanced"</code> (<code>flash.text.AntiAliasType.ADVANCED</code>). 
  
  <p>The default value is <code>"advanced"</code>, which enables advanced anti-aliasing for the font.
  Set to <code>"normal"</code> to disable the advanced anti-aliasing.</p>
  
  <p>This style has no effect for system fonts.</p>
  
  <p>This style applies to all the text in a TextField subcontrol; 
  you cannot apply it to some characters and not others.</p>

   The default value is <code>"advanced"</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontFamily"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontFamily</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Name of the font to use.
  Unlike in a full CSS implementation,
  comma-separated lists are not supported.
  You can use any font family name.
  If you specify a generic font name,
  it is converted to an appropriate device font.
 
   The default value is <code>"Verdana"</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontGridFitType"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontGridFitType</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Sets the <code>gridFitType</code> property of internal TextFields that represent text in Flex controls.
  The possible values are <code>"none"</code> (<code>flash.text.GridFitType.NONE</code>), 
  <code>"pixel"</code> (<code>flash.text.GridFitType.PIXEL</code>),
  and <code>"subpixel"</code> (<code>flash.text.GridFitType.SUBPIXEL</code>). 
  
  <p>This property only applies when you are using an embedded font 
  and the <code>fontAntiAliasType</code> property 
  is set to <code>"advanced"</code>.</p>
  
  <p>This style has no effect for system fonts.</p>
 
  <p>This style applies to all the text in a TextField subcontrol; 
  you can't apply it to some characters and not others.</p>
 
   The default value is <code>"pixel"</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontSharpness"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontSharpness</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Sets the <code>sharpness</code> property of internal TextFields that represent text in Flex controls.
  This property specifies the sharpness of the glyph edges. The possible values are Numbers 
  from -400 through 400. 
  
  <p>This property only applies when you are using an embedded font 
  and the <code>fontAntiAliasType</code> property 
  is set to <code>"advanced"</code>.</p>
  
  <p>This style has no effect for system fonts.</p>
 
  <p>This style applies to all the text in a TextField subcontrol; 
  you can't apply it to some characters and not others.</p>
  
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontSize"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontSize</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">Format: </span>Length &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Height of the text, in pixels.
   The default value is 10 for all controls except the ColorPicker control. 
  For the ColorPicker control, the default value is 11. 
 </td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontStyle"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontStyle</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Determines whether the text is italic font.
  Recognized values are <code>"normal"</code> and <code>"italic"</code>.
 
   The default value is <code>"normal"</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontThickness"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontThickness</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Sets the <code>thickness</code> property of internal TextFields that represent text in Flex controls.
  This property specifies the thickness of the glyph edges.
  The possible values are Numbers from -200 to 200. 
  
  <p>This property only applies when you are using an embedded font 
  and the <code>fontAntiAliasType</code> property 
  is set to <code>"advanced"</code>.</p>
  
  <p>This style has no effect on system fonts.</p>
 
  <p>This style applies to all the text in a TextField subcontrol; 
  you can't apply it to some characters and not others.</p>
  
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:fontWeight"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">fontWeight</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Determines whether the text is boldface.
  Recognized values are <code>normal</code> and <code>bold</code>.
  The default value for Button controls is <code>bold</code>. 
  The default value for all other controls is <code>normal</code>.
 </td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:graphFillAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">graphFillAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Graph fill opacity.
  
   The default value is <code>0.1</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:graphFillColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">graphFillColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Graph fill color.
  
   The default value is <code>0x000000</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:graphLineAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">graphLineAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Graph line opacity.
  
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:graphLineColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">graphLineColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Graph line color.
  
   The default value is <code>0x000000</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:gridAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">gridAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  grid opacity
  
   The default value is <code>0.7</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:gridColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">gridColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  grid color
  
   The default value is <code>0xFFFFFF</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:gridCount"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">gridCount</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  grid count
  
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:hideResizeGrips">hideResizeGrips</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Boolean &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Specifies whether resize grips are hidden when mouse is away from the scrollbar.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:kerning"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">kerning</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Boolean &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  A Boolean value that indicates whether kerning
  is enabled (<code>true</code>) or disabled (<code>false</code>).
  Kerning adjusts the gap between certain character pairs
  to improve readability, and should be used only when necessary,
  such as with headings in large fonts.
  Kerning is supported for embedded fonts only. 
  Certain fonts, such as Verdana, and monospaced fonts,
  such as Courier New, do not support kerning.
    The default value is <code>false</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:letterSpacing"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">letterSpacing</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  The number of additional pixels to appear between each character.
  A positive value increases the character spacing beyond the normal spacing,
  while a negative value decreases it.
 
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:resizeEnabled">resizeEnabled</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Boolean &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Specifies whether scrollbar has a resize feature.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:scrollDuration">scrollDuration</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Duration of scrolling, when the user clicks on scrollbar's background, in seconds.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:selectedBackgroundAlpha">selectedBackgroundAlpha</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected backround opacity.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="hideInheritedStyle">
<td class="summaryTablePaddingCol">&nbsp;</td><td class="summaryTableInheritanceCol"><img class="inheritedSummaryImage" title="Inherited" alt="Inherited" src="../../../images/inheritedSummary.gif"></td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<a class="signatureLink" href="SimpleChartScrollbar.html#style:selectedBackgroundColor">selectedBackgroundColor</a>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected background color.</td><td class="summaryTableOwnerCol"><a href="SimpleChartScrollbar.html">SimpleChartScrollbar</a></td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:selectedGraphFillAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">selectedGraphFillAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected graph's fill opacity.
  
   The default value is <code>0.5</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:selectedGraphFillColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">selectedGraphFillColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected graph's fill color.
  
   The default value is <code>0x000000</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:selectedGraphLineAlpha"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">selectedGraphLineAlpha</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected graph's line opacity.
  
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:selectedGraphLineColor"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">selectedGraphLineColor</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>uint &nbsp; <span class="label">Format: </span>Color &nbsp; <span class="label">CSS Inheritance: </span>no<br>
  Selected graph's line color.
  
   The default value is <code>0x000000</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:textAlign"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">textAlign</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Alignment of text within a container.
  Possible values are <code>"left"</code>, <code>"right"</code>,
  or <code>"center"</code>.
 
  <p>The default value for most components is <code>"left"</code>.
  For the FormItem component,
  the default value is <code>"right"</code>.
  For the Button, LinkButton, and AccordionHeader components,
  the default value is <code>"center"</code>, and
  this property is only recognized when the
  <code>labelPlacement</code> property is set to <code>"left"</code> or
  <code>"right"</code>.
  If <code>labelPlacement</code> is set to <code>"top"</code> or
  <code>"bottom"</code>, the text and any icon are centered.</p>
 </td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:textDecoration"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">textDecoration</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>String &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Determines whether the text is underlined.
  Possible values are <code>"none"</code> and <code>"underline"</code>.
 
   The default value is <code>"none"</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
<tr class="">
<td class="summaryTablePaddingCol"><a name="style:textIndent"></a>&nbsp;</td><td class="summaryTableInheritanceCol">&nbsp;</td><td class="summaryTableSignatureCol">
<div class="summarySignature">
<span class="signatureLink">textIndent</span>
</div>
</td><td class="summaryTableDescription"><span class="label">Type: </span>Number &nbsp; <span class="label">Format: </span>Length &nbsp; <span class="label">CSS Inheritance: </span>yes<br>
  Offset of first line of text from the left side of the container, in pixels.
 
   The default value is <code>0</code>.</td><td class="summaryTableOwnerCol">ChartScrollbar</td>
</tr>
</table>
</div>
<script type="text/javascript" language="javascript">
<!--
showHideInherited();
--></script>
<div class="MainContent">
<a name="propertyDetail"></a>
<div class="detailSectionHeader">Property detail</div>
<a name="categoryAxis"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">categoryAxis</td><td class="detailHeaderType">property</td>
</tr>
</table>
<div class="detailBody">
<code>categoryAxis:<a href="../axes/CategoryAxis.html">CategoryAxis</a></code>&nbsp;&nbsp;[read-only]<p>
   Returns CategoryAxis object of scrollbar
   </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get categoryAxis():<a href="../axes/CategoryAxis.html">CategoryAxis</a></code>
<br>
</div>
<a name="graph"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">graph</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>graph:<a href="../chartClasses/AmGraph.html">AmGraph</a></code>&nbsp;&nbsp;[write-only]<p>
   Specifies which graph will be displayed in the scrollbar.
   XY Chart can not display graphs in the scrollbar.
   </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set graph(value:<a href="../chartClasses/AmGraph.html">AmGraph</a>):void</code>
<br>
</div>
<a name="graphType"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">graphType</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>graphType:String</code>&nbsp;&nbsp;[read-write]<p>
   Type of a scrollbar's graph.
   By default the graph type is the same as the original graph's type,
   however in case of candlestick or ohlc you might want to show line
   graph in the scrollbar.
   
   </p><p>The default value is <code>undefined</code>.</p>
<span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get graphType():String</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set graphType(value:String):void</code>
<br>
</div>
<a name="mouseWheelStep"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">mouseWheelStep</td><td class="detailHeaderType">property</td><td class="detailHeaderRule">&nbsp;</td>
</tr>
</table>
<div class="detailBody">
<code>mouseWheelStep:Number</code>&nbsp;&nbsp;[read-write]<p>
  By default, if scrolling with mouse wheel is enabled, the scrollbar moves by one minPeriod when mouse wheel is turned.
  if you want to change this you can set mouseWheelStep here (in milliseconds). 
  </p><span class="label">Implementation</span>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function get mouseWheelStep():Number</code>
<br>
<code>&nbsp;&nbsp;&nbsp;&nbsp;public function set mouseWheelStep(value:Number):void</code>
<br>
</div>
<a name="constructorDetail"></a>
<div class="detailSectionHeader">Constructor detail</div>
<a name="ChartScrollbar()"></a>
<table cellspacing="0" cellpadding="0" class="detailHeader">
<tr>
<td class="detailHeaderName">ChartScrollbar</td><td class="detailHeaderParens">()</td><td class="detailHeaderType">constructor</td>
</tr>
</table>
<div class="detailBody">
<code>public function ChartScrollbar()</code><p>
       Constructor.
      </p></div>
<a name="includeExamplesSummary"></a>
<div class="detailSectionHeader">Examples</div>
<div class="exampleHeader">chartWithMultipleValueAxes</div>
<div class="detailBody">
<div class="listing">
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                creationComplete="{generateChartData()}"
                width="100%"
                height="100%" viewSourceURL="srcview/index.html"&gt;
    
    &lt;mx:Script&gt;
        &lt;![CDATA[
            import com.amcharts.chartClasses.AmGraph;
            import mx.collections.ArrayCollection;
            
            [Bindable]private var chartData:ArrayCollection = new ArrayCollection(); 
            // generate some random data, quite different range
            private function generateChartData():void{
                var firstDate:Date = new Date();
                firstDate.setDate(firstDate.getDate() - 100);
                
                for(var i:Number = 0; i &lt; 100; i++){
                    var newDate:Date = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);
                    
                    var visits:Number = Math.round(Math.random() * 40) + 100;
                    var hits:Number   = Math.round(Math.random() * 80) + 500;
                    var views:Number   = Math.round(Math.random() * 6000);
                    
                    chartData.addItem({date:newDate, visits:visits, hits:hits, views:views});
                }
            }
            
            private function zoom():void{
                chart.zoomToIndexes(0,20);
            }
            
            private var _newValueAxis:ValueAxis;
            
            private function addValueAxis():void{
                
                _newValueAxis = new ValueAxis();
                _newValueAxis.offset = 50;
                _newValueAxis.setStyle("gridAlpha", 0);
                _newValueAxis.setStyle("axisColor", 0xB0DE09);
                _newValueAxis.setStyle("axisThickness", 2);
                chart.addValueAxis(_newValueAxis);
                
                var graph:AmGraph = new AmGraph();
                graph.valueField = "views";
                graph.setStyle("bullet", "triangleUp");
                graph.setStyle("hideBulletsCount", 30);
                graph.type = "smoothedLine";
                graph.valueAxis = _newValueAxis;        
                chart.addGraph(graph);                
                
                addAxis.enabled = false;
                removeAxis.enabled = true;
            }
            
            private function removeValueAxis():void{
                chart.removeValueAxis(_newValueAxis);
                addAxis.enabled = true;
                removeAxis.enabled = false;            
            }
            
        ]]&gt;
    &lt;/mx:Script&gt;
    
    &lt;mx:VBox width="100%" height="100%"&gt;
        &lt;amcharts:AmSerialChart 
            dataUpdated="{zoom()}" 
            id="chart" 
            width="100%" 
            height="100%" 
            dataProvider="{chartData}" 
            categoryField="date"&gt;
            
            &lt;amcharts:graphs&gt;
                &lt;!-- In case you have more then one value axis, you should set valueAxis for the graph --&gt;
                &lt;amcharts:AmGraph title="Visits" valueAxis="{v1}" valueField="visits" type="smoothedLine" bullet="round" hideBulletsCount="30"/&gt;                        
                &lt;amcharts:AmGraph title="Visits" valueAxis="{v2}" valueField="hits" type="smoothedLine"  bullet="square" hideBulletsCount="30"/&gt;                        
            &lt;/amcharts:graphs&gt;
            &lt;!-- you can have any number of value axes. If you place value axes on the same side, you can move axis by setting "offset" property --&gt;
            &lt;amcharts:valueAxes&gt;
                &lt;amcharts:ValueAxis id="v1" axisColor="#FF6600" axisThickness="2"/&gt;                    
                &lt;amcharts:ValueAxis id="v2" position="right" axisColor="#FCD202" gridAlpha="0" axisThickness="2"/&gt;                    
            &lt;/amcharts:valueAxes&gt;
            
            &lt;amcharts:categoryAxis&gt;
                &lt;amcharts:CategoryAxis parseDates="true" minPeriod="DD" gridCount="13"/&gt;
            &lt;/amcharts:categoryAxis&gt;
            
            &lt;amcharts:chartCursor&gt;
                &lt;amcharts:ChartCursor cursorPosition="mouse"/&gt;                        
            &lt;/amcharts:chartCursor&gt;
            &lt;amcharts:chartScrollbar&gt;
                &lt;amcharts:ChartScrollbar height="15"/&gt;                        
            &lt;/amcharts:chartScrollbar&gt;
        &lt;/amcharts:AmSerialChart&gt;
        &lt;mx:HBox&gt;
            &lt;mx:Spacer width="35"/&gt;
            &lt;mx:Button id="addAxis" label="add value axis" click="{addValueAxis()}"/&gt;
            &lt;mx:Button enabled="false" id="removeAxis" label="remove value axis" click="{removeValueAxis()}"/&gt;
        &lt;/mx:HBox&gt;
        &lt;mx:Spacer height="15"/&gt;
    &lt;/mx:VBox&gt;    
&lt;/mx:Application&gt;</pre>
</div>
<script type="text/javascript" language="javascript">
<!--
				AC_FL_RunContent(
					"src", "../../../chartWithMultipleValueAxes",
					"width", "100%",
					"height", "400px",
					"align", "middle",
					"id", "example1",
					"quality", "high",
					"bgcolor", "",
					"name", "example1",
					"flashvars","",
					"allowScriptAccess","sameDomain",
					"type", "application/x-shockwave-flash",
					"pluginspage", "http://www.macromedia.com/go/getflashplayer"
				);
			--></script>
</div>
<div class="exampleHeader">scrollableAndZoomableChart</div>
<div class="detailBody">
<div class="listing">
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                width="100%"
                height="100%" 
                creationComplete="{clearFilter()}" viewSourceURL="srcview/index.html"&gt;
    
    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]private var chartData:ArrayCollection = new ArrayCollection([
                {year:"2000",a:20,b:5,c:10,d:5},
                {year:"2001",a:21,b:6,c:10,d:10},
                {year:"2002",a:24,b:7,c:9,d:10},
                {year:"2003",a:21,b:5,c:10,d:8},
                {year:"2004",a:24,b:4,c:10,d:8},
                {year:"2005",a:26,b:8,c:10,d:9},
                {year:"2006",a:27,b:9,c:12,d:9},
                {year:"2007",a:29,b:9,c:13,d:8},
                {year:"2008",a:30,b:10,c:14,d:7},
                {year:"2009",a:26,b:12,c:15,d:8},
                {year:"2010",a:24,b:11,c:13,d:9},
                {year:"2011",a:22,b:14,c:11,d:8},
                {year:"2012",a:21,b:16,c:11,d:7},
                {year:"2013",a:20,b:17,c:13,d:6},
                {year:"2014",a:15,b:19,c:13,d:5},
                {year:"2015",a:14,b:18,c:14,d:3}
                
            ]);
            
            private function zoom():void{
                chart.zoomToIndexes(6,12);
            }
            
            private function clearFilter():void{
                this.filters = [];
            }
            
        ]]&gt;
    &lt;/mx:Script&gt;
    &lt;mx:filters&gt; 
        &lt;flash.filters:BevelFilter id='bevelFilter' xmlns:flash.filters='flash.filters.*' 
                                   angle='60'
                                   blurX='5' blurY='5'
                                   distance='3'
                                   highlightAlpha='0.39' highlightColor='#ffffff' 
                                   knockout='false' quality='1'
                                   shadowAlpha='0.27' shadowColor='#000000' strength='1' type='inner'/&gt;
    &lt;/mx:filters&gt;
    
    &lt;mx:HBox backgroundColor="#FFFFFF" width="100%" height="100%"&gt;
        &lt;mx:VBox width="100%" height="100%"&gt;                
            &lt;amcharts:AmSerialChart
                width="100%"
                height="100%"
                id="chart"
                dataProvider="{chartData}"
                categoryField="year"
                plotAreaFillAlphas="[0]"
                dataUpdated="{zoom()}"&gt;
                &lt;amcharts:graphs&gt;
                    &lt;amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample a" 
                        valueField="a" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/&gt;                        
                    &lt;amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample b" 
                        valueField="b" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/&gt;
                    &lt;amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample c" 
                        valueField="c" 
                        type="column" 
                        lineAlpha="0.8" 
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/&gt;
                    &lt;amcharts:AmGraph 
                        color="#FFFFFF" 
                        title="Sample d" 
                        valueField="d" 
                        type="column" 
                        lineAlpha="0.8"
                        fillAlphas="[0.8]"
                        showBalloon="false"
                        filters="{[bevelFilter]}"/&gt;
                &lt;/amcharts:graphs&gt;
                
                &lt;amcharts:valueAxes&gt;
                    &lt;amcharts:ValueAxis stackType="regular" gridAlpha="0.1"/&gt;                    
                &lt;/amcharts:valueAxes&gt;
                
                &lt;amcharts:categoryAxis&gt;
                    &lt;amcharts:CategoryAxis gridPosition="start" gridAlpha="0.1" fontWeight="bold"/&gt;
                &lt;/amcharts:categoryAxis&gt;
                
                &lt;amcharts:chartScrollbar&gt;
                    &lt;amcharts:ChartScrollbar hideResizeGrips="false" height="20"/&gt;                    
                &lt;/amcharts:chartScrollbar&gt;
                
                &lt;amcharts:chartCursor&gt;
                    &lt;amcharts:ChartCursor cursorAlpha=".5"/&gt;                    
                &lt;/amcharts:chartCursor&gt;
                
            &lt;/amcharts:AmSerialChart&gt;
            
            &lt;amcharts:AmLegend 
                fontWeight="bold"
                dataProvider="{chart}" 
                width="100%" align="center"/&gt;                
        &lt;/mx:VBox&gt;
        
        
    &lt;/mx:HBox&gt;
    
&lt;/mx:Application&gt;</pre>
</div>
<script type="text/javascript" language="javascript">
<!--
				AC_FL_RunContent(
					"src", "../../../scrollableAndZoomableChart",
					"width", "100%",
					"height", "400px",
					"align", "middle",
					"id", "example2",
					"quality", "high",
					"bgcolor", "",
					"name", "example2",
					"flashvars","",
					"allowScriptAccess","sameDomain",
					"type", "application/x-shockwave-flash",
					"pluginspage", "http://www.macromedia.com/go/getflashplayer"
				);
			--></script>
</div>
<div class="exampleHeader">scatterChart</div>
<div class="detailBody">
<div class="listing">
<pre>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:amcharts="http://www.amcharts.com/com_internal"
                layout="absolute"
                backgroundColor="#FFFFFF"
                width="100%"
                height="100%" viewSourceURL="srcview/index.html"&gt;
    
    &lt;mx:Script&gt;
        &lt;![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var chartData:ArrayCollection = new ArrayCollection([
                // scatter points            
                {ax:1, ay:0.5, bx:1, by:2.2},
                {ax:2, ay:1.3, bx:2, by:4.9},
                {ax:3, ay:2.3, bx:3, by:5.1},
                {ax:4, ay:2.8, bx:4, by:5.3},
                {ax:5, ay:3.5, bx:5, by:6.1},
                {ax:6, ay:5.1, bx:6, by:8.3},
                {ax:7, ay:6.7, bx:7, by:10.5},
                {ax:8, ay:8.0, bx:8, by:12.3},
                {ax:9, ay:8.9, bx:9, by:14.5},
                {ax:10, ay:9.7, bx:10, by:15.0},
                {ax:11, ay:10.4, bx:11, by:18.8},
                {ax:12, ay:11.7, bx:12, by:19.0},
                // trend graphs
                {agx:12, agy:11, bgx:12, bgy:19},
                {agx:1, agy:1, bgx:1, bgy:2}            
            ]);    
        ]]&gt;
    &lt;/mx:Script&gt;
    
    
    &lt;amcharts:AmXYChart
        width="100%"
        height="100%"
        id="chart"
        dataProvider="{chartData}"
        startDuration="1"&gt;
        &lt;amcharts:graphs&gt;
            &lt;amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="ax" yField="ay" lineAlpha="0" bullet="triangleDown"/&gt;
            &lt;amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="bx" yField="by" lineAlpha="0" bullet="square"/&gt;
            &lt;amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="agx" yField="agy" lineThickness="2" lineColor="0xFF6600"/&gt;
            &lt;amcharts:AmGraph balloonText="x:[[x]] y:[[y]]" xField="bgx" yField="bgy" lineThickness="2" lineColor="0xFCD202"/&gt;                        
        &lt;/amcharts:graphs&gt;
        
        &lt;amcharts:valueAxes&gt;
            &lt;amcharts:ValueAxis position="left" gridCount="20" labelFrequency="2"/&gt;
            &lt;amcharts:ValueAxis position="bottom" gridCount="20"/&gt;                
        &lt;/amcharts:valueAxes&gt;
        
        &lt;amcharts:chartCursor&gt;
            &lt;amcharts:ChartCursor&gt;                    
            &lt;/amcharts:ChartCursor&gt;
        &lt;/amcharts:chartCursor&gt;            
        
        &lt;amcharts:chartScrollbar&gt;
            &lt;amcharts:ChartScrollbar hideResizeGrips="false" height="20"&gt;                    
            &lt;/amcharts:ChartScrollbar&gt;    
        &lt;/amcharts:chartScrollbar&gt;
        
    &lt;/amcharts:AmXYChart&gt;
    
&lt;/mx:Application&gt;</pre>
</div>
<script type="text/javascript" language="javascript">
<!--
				AC_FL_RunContent(
					"src", "../../../scatterChart",
					"width", "100%",
					"height", "400px",
					"align", "middle",
					"id", "example3",
					"quality", "high",
					"bgcolor", "",
					"name", "example3",
					"flashvars","",
					"allowScriptAccess","sameDomain",
					"type", "application/x-shockwave-flash",
					"pluginspage", "http://www.macromedia.com/go/getflashplayer"
				);
			--></script>
</div>
<br>
<br>
<hr>
<br>
<p></p>
<center class="copyright"> 
</center>
</div>
</body>
</html>
<!-- -->
